<template>
  <div class="mt-4">
    <el-form
      :model="data.help_list"
      :inline="true"
      ref="ruleFormRef"
      class="w-full"
      label-width="90"
      v-loading="data.mtloading"
    >
      <div v-for="(item, key) in data.help_list" id="demo-tabsLang">
        <div class="w-full flex flex-wrap mb-2 bg-slate-50 relative">
          <el-tabs
            v-model="item.lang"
            type="card"
            :class="
              locale == 'en'
                ? 'demo-tabsLang_en demo-tabsLang'
                : 'demo-tabsLang'
            "
            @tab-change="onTabLang(item)"
          >
            <el-tab-pane
              :disabled="!props.info.m_id"
              v-for="ite in data.language"
              :key="ite.lang"
              :label="
                locale == 'en'
                  ? ite.lang == 'zh-cn'
                    ? $t('message.DefaultData')
                    : ite.lang
                  : ite.name
              "
              :name="ite.lang"
            >
              <div class="w-full flex flex-wrap mb-2 bg-slate-50 relative">
                <div class="w-1/4 p-4 pb-0">
                  <el-form-item
                    :label="$t('machine.helps.helpTitle') + ':'"
                    prop="deal_service_phone"
                    class="w-11/12"
                  >
                    <!-- <span v-if="item.btmodify">{{ item.title || '--' }}</span> -->
                    <el-input
                      v-model="item.title"
                      :placeholder="$t('message.pleaseEnter')"
                      style="width: 100%"
                    />
                  </el-form-item>
                </div>
                <div class="w-1/4 p-4 pb-0">
                  <el-form-item
                    :label="$t('machine.helps.displayHelp') + ':'"
                    prop="show_goods"
                    class="w-11/12"
                  >
                    <!-- <span v-if="item.btmodify">{{ item.show == 1 ? $t("machine.configs.display") : $t("machine.configs.hide") }}</span> -->
                    <el-switch
                      v-model="item.show"
                      :active-value="1"
                      :inactive-value="2"
                    />
                  </el-form-item>
                </div>
                <div class="w-1/4 p-4 pb-0">
                  <!-- <el-form-item :label="$t('machine.configs.langCode')+':'" prop="deal_service_phone" class="w-11/12">
							<span v-if="item.btmodify">{{ item.lang || '--' }}</span>
							<el-select v-else v-model="item.lang" :placeholder="$t('message.pleaseSelect')">
								<el-option v-for="item of data.language" :key="item.l_id" :label="item.l_id + ' - ' + item.name + ' - ' + item.lang" :value="item.lang" />
							</el-select>
						</el-form-item> -->
                </div>
                <div class="absolute right-4 top-4">
                  <div>
                    <el-button type="primary" size="large" @click="add(key)">{{
                      $t("public.newAdd")
                    }}</el-button>
                    <!-- <el-button type="warning" size="large" @click="modify(item)">{{ $t('public.modify')}}</el-button> -->
                    <el-button
                      type="success"
                      size="large"
                      @click="preserve(item)"
                      >{{ $t("public.save") }}</el-button
                    >
                    <el-button
                      type="danger"
                      size="large"
                      @click="del(item, key)"
                      >{{ $t("public.del") }}</el-button
                    >
                  </div>
                  <!-- <div v-else>
							<el-button type="success" size="large" @click="preserve(item)">{{$t("public.save")}}</el-button>
							<el-button type="info" size="large" @click="cancel(item,key)">{{ $t('public.cancel')}}</el-button>
						</div> -->
                </div>
                <div class="w-full p-4 pt-0">
                  <el-form-item
                    :label="$t('machine.helps.content') + ':'"
                    prop="show_goods"
                    class="w-full"
                  >
                    <Editor v-model="item.content" />
                  </el-form-item>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "vue-i18n";
const { t: $t, locale } = useI18n();
import { getlang } from "@/api/manage";
import {
  gethelpList,
  addhelpList,
  updatehelpList,
  delhelpList
} from "@/api/machine";
let props = defineProps({
  info: {
    type: Object,
    default: {}
  }
});
interface helpListItem {
  // 帮助信息主体
  mh_id: string;
  title: string;
  content: string;
  lang: string;
  show: number;
  btmodify: boolean;
  pid: number;
}
let data = reactive({
  mtloading: false, // 加载
  language: [], // 语言列表
  used: "", // 原始数据
  help_list: []
});
let ruleFormRef = ref<any>(); // 身份证认证
// tab切换语言
let onTabLang = (row: any) => {
  let langArr = row.children.filter((item: any) => item.lang == row.lang);
  if (langArr.length) {
    row.title = langArr[0].title;
    row.content = langArr[0].content;
    row.show = langArr[0].show;
    row.pid = langArr[0].pid;
    row.mh_id = langArr[0].mh_id;
    row.lang = langArr[0].lang;
    row.btmodify = langArr[0].lbtmodify;
  } else {
    row.title = "";
    row.content = "";
    row.show = 1;
    row.pid = row.children[0].mh_id;
    row.btmodify = true;
    row.mh_id = "";
  }
};
// 获取列表信息
let getlist = (value: string, index: number) => {
  let parm = {};
  parm.m_id = props.info.m_id;
  gethelpList(parm).then((res: any) => {
    if (res.state == 200) {
      data.help_list = [];
      if (!res.data.length) {
        data.help_list.push({
          mh_id: "",
          title: "",
          content: "",
          lang: "zh-cn",
          show: 1,
          btmodify: false,
          children: [],
          pid: 0
        });
        data.help_list.push({
          mh_id: "",
          title: "",
          content: "",
          lang: "zh-cn",
          show: 1,
          btmodify: false,
          children: [],
          pid: 0
        });
        return;
      }
      res.data.forEach((item) => {
        data.help_list.push({
          mh_id: item.mh_id,
          title: item.title,
          content: item.content,
          lang: item.lang,
          show: item.show,
          btmodify: true,
          pid: item.pid
        });
      });
      let help_list = data.help_list.filter(
        (item: any) => item.lang == "zh-cn"
      );
      if (help_list.length) {
        help_list.forEach((items: any, index: number) => {
          items.children = data.help_list.filter(
            (item: any) => item.pid == items.mh_id
          );
          items.children.unshift({
            mh_id: items.mh_id,
            title: items.title,
            content: items.content,
            lang: items.lang,
            show: items.show,
            btmodify: true,
            pid: items.pid
          });
        });
      }
      data.help_list = help_list;
      data.used = JSON.stringify(data.help_list);
    }
  });
};

// 新增
let add = (e: any) => {
  let num = e + 1;
  let obj = {
    mh_id: "",
    title: "默认数据",
    content: "默认内容",
    lang: "zh-cn",
    show: 1,
    btmodify: false,
    children: [],
    pid: 0
  };
  data.help_list.splice(num, 0, obj);
  preserve(obj);
};

// 删除
let del = (e, k) => {
  ElMessageBox.confirm($t("message.delData"))
    .then((res) => {
      if (e.mh_id == "") {
        data.help_list.splice(k, 1);
      } else {
        let mh_idArr: any = [];
        if (e.children && e.children.length) {
          e.children.forEach((item: any) => {
            if (item.mh_id) {
              mh_idArr.push(item.mh_id);
            }
          });
        }
        let obj = {
          mh_id: mh_idArr.join(",") || e.mh_id
        };
        delhelpList(obj).then((res) => {
          if (res.state == 200) {
            data.help_list.splice(k, 1);
            ElMessage({
              message: $t("message.setcomplete"),
              type: "success"
            });
            return;
          }
          ElMessage({
            message: $t("message.networkFailed"),
            type: "error"
          });
        });
      }
    })
    .catch((err) => {
      console.log("取消");
    });
};

// 保存
let preserve = (e) => {
  if (e.title == "" || e.content == "" || e.lang == "") {
    ElMessage({
      message: $t("message.pleaseEnterData"),
      type: "error"
    });
    return;
  }

  let help_list = {
    title: e.title,
    content: e.content,
    lang: e.lang,
    show: e.show,
    pid: e.pid
  };
  // 新增
  if (e.mh_id == "") {
    let info = props.info;
    let obj = {
      m_id: info.m_id,
      machine_id: info.machine_id,
      help_list: [help_list]
    };
    addhelpList(obj).then((res) => {
      if (res.state == 200) {
        ElMessage({
          message: $t("message.addSuccess"),
          type: "success"
        });
        getlist();
        return;
      }
      ElMessage({
        message: $t("message.networkFailed"),
        type: "error"
      });
    });
  } else {
    // 修改
    help_list.mh_id = e.mh_id;
    let obj = {
      help_list: [help_list]
    };
    updatehelpList(obj).then((res) => {
      if (res.state == 200) {
        ElMessage({
          message: $t("message.addSuccess"),
          type: "success"
        });
        getlist();
        return;
      }
      ElMessage({
        message: $t("message.networkFailed"),
        type: "error"
      });
    });
  }
};

// 取消
let cancel = (e, k) => {
  if (e.mh_id == "") {
    data.help_list.splice(k, 1);
  } else {
    let arr = JSON.parse(data.used);
    for (let item of arr) {
      if (item.mh_id == e.mh_id) {
        for (let key in data.help_list) {
          if (data.help_list[key].mh_id == e.mh_id) {
            data.help_list[key] = item;
          }
        }
      }
    }
  }
};

// 获取信息
let getlanglist = () => {
  // 语言信息
  getlang().then((res) => {
    if (res.state == 200) {
      res.data.forEach((item) => {
        if (item.lang == "zh-cn") {
          item.name = $t("message.DefaultData");
        }
      });
      data.language = res.data;
    }
  });
};

getlanglist();
getlist();
</script>
<style lang="scss" scoped>
.demo-tabsLang_en {
  width: 270px !important;
}

.demo-tabsLang {
  overflow-x: auto;
  //   width: 340px;
  float: right;

  .isActive {
    background-color: #409eff;
    color: #fff;
  }

  .tabsLang_item {
    cursor: pointer;
  }
}

.tabsLang {
  display: flex;
}

.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #409eff;
  color: #fff;
}
</style>
